<template>
  <div>
    <!-- 表格跨页多选 -->
    {{arrSelection}}
    <el-table
      class="sortingVisible"
      :data="tableData"
      ref="table"
      style="width: 50%"
      :row-key="getKey"
      border
      @selection-change="handleChangeSelection"
    >
      <el-table-column type="selection" width="55" reserve-selection></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <el-input type="text" v-model="scope.row.name" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleChangeSize"
      @current-change="handleChangeCurrent"
      :current-page.sync="paginationData.page"
      :page-sizes="[2, 5, 10, 20, 50]"
      :page-size="paginationData.page_size"
      layout="total,sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>


<script>
import Sortable from "sortablejs"; //列表拖动插件
export default {
  components: {
    Sortable
  },
  data() {
    return {
      tableData: [
        { name: "张三", id: 1 },
        { name: "张三", id: 2 },
        { name: "张三", id: 3 },
        { name: "李四", id: 4 },
        { name: "李四", id: 5 },
        { name: "李四", id: 6 }
      ],
      total: 6,
      paginationData: {
        page: 1,
        page_size: 2
      },
      arrSelection: []
    };
  },
  created() {},
  mounted() {
    let _this = this;
    this.$nextTick(() => {
      this.rowDrop();
    });
  },
  methods: {
    getKey(row) {
      return row.id;
    },
    // 拖动当前行
    rowDrop() {
      const tbody = document.querySelector(
        ".sortingVisible .el-table__body-wrapper  tbody"
      );
      const _this = this;
      Sortable.create(tbody, {
        scroll: true, //可滚动
        animation: 800, //拖拽时的过渡效果
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]; //当前行
          _this.tableData.splice(newIndex, 0, currRow);
          console.log(_this.tableData); //_this.tableData是拖拽后的表格数据，可直接提交到后端
        }
      });
    },
    //行-拖拽
    // rowDrop() {
    //   const tbody = document.querySelector(
    //     ".sortingVisible .el-table__body-wrapper tbody"
    //   );
    //   const _this = this;
    //   Sortable.create(tbody, {
    //     scroll: true, //可滚动
    //     animation: 800, //拖拽时的过渡效果
    //     onEnd({ from, to, newIndex, oldIndex }) {
    //       let backData = JSON.parse(JSON.stringify(_this.tableData));
    //       let oldList = [];
    //       backData.forEach((item, index) => {
    //         if (
    //           backData[oldIndex].mergeId &&
    //           item.mergeId == backData[oldIndex].mergeId
    //         ) {
    //           oldList.push(item);
    //         }
    //       });
    //       if (oldList.length > 0) {
    //         //多行拖动
    //         let delList = backData.filter(
    //           item => item.mergeId !== backData[oldIndex].mergeId
    //         );
    //         delList.splice(newIndex, 0, oldList);
    //         backData = delList.flat();
    //       } else {
    //         //单行拖动
    //         let idx = newIndex;
    //         if (newIndex > oldIndex) {
    //           //下滑
    //           backData.forEach((item, index) => {
    //             if (
    //               item.mergeId &&
    //               item.mergeId == backData[newIndex].mergeId
    //             ) {
    //               idx = index;
    //             }
    //           });
    //         } else if (newIndex < oldIndex) {
    //           //上滑
    //           let ids = [];
    //           backData.forEach((item, index) => {
    //             if (
    //               item.mergeId &&
    //               item.mergeId == backData[newIndex].mergeId
    //             ) {
    //               ids.push(index);
    //             }
    //           });
    //           if (ids.length > 0) {
    //             idx = ids[0];
    //           } else {
    //             idx = newIndex;
    //           }
    //         }
    //         const currRow = backData.splice(oldIndex, 1)[0];
    //         backData.splice(idx, 0, currRow);
    //       }
    //       _this.tableData = [];
    //       _this.$nextTick(function() {
    //         _this.tableData = JSON.parse(JSON.stringify(backData)); //更新moveListData顺序
    //       });
    //     }
    //   });
    // },
    // getTables() {
    //   this.$http({
    //     methods : "POST",
    //     url: "http://192.168.60.47:8100/equip/equipList/page",
    //     data: { desc: "true", key: "", page: 1, row: 10, sortBy: "" }
    //   }).then(res=>{
    //     console.log(res)
    //   })

    //   console.log(this.arrSelection, "arrSelection");
    // },
    // 当选择项发生变化时会触发该事件，selection就是选择的数据
    handleChangeSelection(selection) {
      this.arrSelection = selection;
    },
    handleChangeCurrent(val) {
      // console.log(val)
      this.paginationData.page = val;
      // 请求表格数据
    },
    handleChangeSize(val) {
      this.paginationData.page_size = val;
      console.log(val);
    }
  }
};
</script>

<style scoped>
</style>